Hi everyone in this article, I’m explaining about offline
web application using HTML5.
Description:
I have recently been working on a fairly complex web application
which has the requirement to function both online and off-line. For both
off-line web pages and content, the HTML5 Manifest is the best way to go for
off-line functionality. However, I quickly realized that maintaining a list of
all individual content items for a complex website can become very cumbersome.
To address this challenge, I have automated the process of creating the
manifest file. However, the file is only generated when the website is running
in DEBUG mode. Once the site has been published in release mode, this process
only uses the last version of the Manifest file that was created. This enhances
the performance of the published website while ensuring that the manifest is up
to date with all your latest website content modifications when working in
DEBUG mode. In addition, the process includes several features for including or
excluding certain website content by both directory and file. Manifest
versioning can also be handled manually or in automated fashion depending on
your requirements.
For those of you who have never experienced making an
ASP.NET or MVC application available off-line before, here are the basic steps:
Step 1:
Open Visual studion >> file >> new
>> Website
Select ASP.NET Empty Website >> Give
Application Name “OfflineWebSiteApp” >> Click Ok
Step 2:
Add 2 html file in your application
Index.html
<!DOCTYPE html>
<html manifest="Manifest.ashx" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Hello Index</h1>
<a href="About.html">About</a>
</body>
</html>
About.html
<!DOCTYPE html>
<html manifest="Manifest.ashx" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Hi About</h1>
<a href="Index.html">Index</a>
</body>
</html>
Step 3:
Create manifest file
The Manifest file is mostly a text file containing a list of all the website content (i.e. pages, images, scripts etc…) which are required to make the website function off-line. Basically, everything contained in the Manifest will be cached on the user’s local computer so the website will function when it is not connected to the internet. My intent with this article is not to go into detail on how to manually create a Manifest file or spend a lot of time explaining each section of the Manifest file. Suffice it to say that itemizing every piece of content on your website can be very time consuming and error prone.
Now add 2 Manifest file
1. Manifest.txt
2. Manifest.ashx
Manifest.txt:
Manifest.ashx:
<%@ WebHandler Language="C#" Class="Manifest" %>
using System;
using System.Web;
public class Manifest : IHttpHandler
{
const string FileTypes = "*.aspx;*.htm;*.js;*.css;*.gif;*.png;*.jp*g;*.ico;*.txt;*.tif";
/// <summary>
/// Determines the version number contained in the Manifest. This could also be set
/// to something
/// dynamic such as the date, depending on your requirements.
/// </summary>
const string ManifestVersion = "v1";
/// <summary>
/// A list of folder names in the root directory to include in the Manifest file.
/// </summary>
System.Collections.Generic.HashSet<string> includeFolders = new System.Collections.Generic.HashSet<string> { "css", "elements", "inc" };
/// <summary>
/// A list of file names in any folder to exclude from the Manifest file.
/// </summary>
System.Collections.Generic.HashSet<string> excludeFiles = new System.Collections.Generic.HashSet<string> { "Manifest.txt" };
public static bool IsDebug
{
get
{
bool debug = false;
try
{
#if DEBUG
debug = true;
#endif
}
catch
{
debug = false;
}
return debug;
}
}
public void ProcessRequest(HttpContext context)
{
HttpRequest request = context.Request;
HttpResponse response = context.Response;
System.Text.StringBuilder SB = new System.Text.StringBuilder();
if (IsDebug)
{
response.ContentType = "text/cache-manifest";
SB.AppendLine("CACHE MANIFEST");
SB.AppendLine("# " + ManifestVersion);
SB.AppendLine("# Root Path: " + request.PhysicalApplicationPath);
SB.AppendLine();
SB.AppendLine("CACHE:");
SB.AppendLine("# Jquery Libraries");
//Add jquery entires to the mainfest file.
SB.AppendLine(@"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js");
SB.AppendLine(@"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js");
SB.AppendLine();
SB.AppendLine("# Site Content");
string[] filePatterns = FileTypes.Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries);
System.Collections.Generic.List<string> cacheFileList = new System.Collections.Generic.List<string>();
foreach (string filePattern in filePatterns)
{
cacheFileList.AddRange(System.IO.Directory.GetFiles(request.PhysicalApplicationPath, filePattern, System.IO.SearchOption.AllDirectories));
}
cacheFileList.Sort();
foreach (string filePath in cacheFileList)
{
string path = String.Format("{0}/{1}", request.ApplicationPath, filePath.Replace(request.PhysicalApplicationPath, "").Replace(@"\", "/"));
char[] del = new char[] { '/' };
string[] folder = path.Split(del, StringSplitOptions.RemoveEmptyEntries);
if (folder.Length <= 1 || includeFolders.Contains(folder[0]))
{
path = path.Substring(2);
if (!excludeFiles.Contains(path)) SB.AppendLine(path);
}
}
//Add NETWORK section to the mainfest file.
SB.AppendLine();
SB.AppendLine("NETWORK:");
SB.AppendLine("http://*");
SB.AppendLine("https://*");
//Create an updated manifest file
using (System.IO.StreamWriter writer = new System.IO.StreamWriter(request.PhysicalApplicationPath + "Manifest.txt"))
{
writer.Write(SB.ToString());
}
}
//Create a response from the contents of the Manifest.txt file.
//This file was dynamically created by this process, if in DEBUG mode.
context.Response.ContentType = "text/cache-manifest";
context.Response.WriteFile(context.Server.MapPath("Manifest.txt"));
}
public bool IsReusable
{
get
{
return false;
}
}
}
Step 4:
Add a reference to the Manifest on any web page that you would like to be
available off-line:
The Manifest reference should be added to the <html>
tag for all web pages that will be functional off-line. This was the easiest
part of the process. My reference was created by pointing to the Generic
Handler which is responsible for serving up the Manifest file. However, if you
chose to add the Manifest mime-type to your web.config file, I believe you
could also point directly at a text file which contained a valid Manifest as
well. Here is what the <html> manifest tag looks like:
<html manifest="Manifest.ashx">
Manifest.ashx above is the name of the Generic Handler I created in my ASP.NET project. (Right click on your visual studio project name, add new item, select Generic Handler from within the Web template list)
Now run our application:
Output:
1. When Application Run First Time you can go any page
2. After close iis server we can go to any page
Leave Comment